<template>
    <div class="bottom-box">
        <div @click="ifSelect(1)" :class="{ active:$route.path==='/home' }">
            <p class="iconfont icon-home"></p>
            <p>首页</p>
        </div>
        <div @click="ifSelect(2)" :class="{ active:$route.path==='/types' }">
            <p class="iconfont icon-type"></p>
            <p>分类</p>
        </div>
        <div @click="ifSelect(3)" :class="{ active:$route.path==='/cart' }">
            <p class="iconfont icon-cart"></p>
            <p>购物车</p>
        </div>
        <div @click="ifSelect(4)" :class="{ active:$route.path==='/about' }">
            <p class="iconfont icon-about"></p>
            <p>关于我</p> 
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pages:1,
            act:""
        }
    },
    watch:{
        $route(){
            
        }
    },
    methods: {
        ifSelect(page){
            this.pages = page;
            switch(page){
                case 1:
                    this.$router.replace("home");
                    break;
                case 2:
                    this.$router.replace("types");
                    break;
                case 3:
                    this.$router.replace("cart");
                    break;
                case 4:
                    this.$router.replace("about");
                    break;
            }
        },
        activeDiv(){
            // if()
        },
        
    },
    mounted() {
        
    },
}
</script>
<style lang="less" scoped>
.bottom-box{
    position:absolute;
    width: 100%;
    height: @h;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
    > div {
        width: 25%;
        line-height: 1.3;
        // color: @light-pink;
        :first-child {
            font-size: 50px;
        }
        :last-child {
            font-size: 20px;
        }
    }
    .active{
        width: 25%;
        line-height: 1.3;
        color:@light-pink;
        :first-child {
                font-size: 50px;
            }
            :last-child {
                font-size: 20px;
            }
    }
}
</style>